<template>
    <header style="width: 90%;">
        <!-- nav item -->
        <span class="pointer mr20 menuitem" v-for="(item,index) in menuList" @click="handleClick(item,index)" :style="activeIndex==index?'color:#409EFF':''">
            {{item.name}}
            <i class="el-icon-arrow-up" v-if="activeIndex==index && showMenu"></i>
            <i v-else class="el-icon-arrow-down"></i>
        </span>
        <!-- header menu -->
        <transition name="el-zoom-in-top">
            <div class="headerMenu" v-if="showMenu">
                <el-col :span="4" style="text-align: inherit;">
                    <ul>
                        <li class="mt20 pointer"> <i class="el-icon-arrow-right"></i>Item</li>
                        <li class="mt20 pointer"> <i class="el-icon-arrow-right"></i>Item</li>
                        <li class="mt20 pointer"> <i class="el-icon-arrow-right"></i>Item</li>
                        <li class="mt20 pointer"> <i class="el-icon-arrow-right"></i>Item</li>
                    </ul>
                </el-col>
                <el-col :span="4">
                    <ul>
                        <li class="mt20 pointer"> <i class="el-icon-arrow-right"></i>Item</li>
                        <li class="mt20 pointer"> <i class="el-icon-arrow-right"></i>Item</li>
                        <li class="mt20 pointer"> <i class="el-icon-arrow-right"></i>Item</li>
                    </ul>
                </el-col>
                <el-col :span="4">
                    <ul>
                        <li class="mt20 pointer"> <i class="el-icon-arrow-right"></i>Item</li>
                        <li class="mt20 pointer"> <i class="el-icon-arrow-right"></i>Item</li>
                        <li class="mt20 pointer"> <i class="el-icon-arrow-right"></i>Item</li>
                    </ul>
                </el-col>
                <el-col :span="4">
                    <ul>
                        <li class="mt20 pointer"> <i class="el-icon-arrow-right"></i>Item</li>
                        <li class="mt20 pointer"> <i class="el-icon-arrow-right"></i>Item</li>
                        <li class="mt20 pointer"> <i class="el-icon-arrow-right"></i>Item</li>
                    </ul>
                </el-col>
            </div>
        </transition>

    </header>
</template>

<script>
    export default {
        data() {
            return {
                activeIndex: 0,
                showMenu: false,
                menuList: [{
                        name: this.$t('order.dashbord.dashbord'),
                        url: '/'
                    },
                    {
                        name: this.$t('order.dashbord.order'),
                        url: '/order'
                    },
                    {
                        name: this.$t('order.dashbord.lister'),
                        url: '/'
                    },
                    {
                        name: this.$t('order.dashbord.purchase'),
                        url: '/'
                    },
                    {
                        name: this.$t('order.dashbord.task'),
                        url: '/'
                    },
                    {
                        name: this.$t('order.dashbord.crm'),
                        url: '/'
                    },
                    {
                        name: this.$t('order.dashbord.picture'),
                        url: '/'
                    },
                ]
            }
        },
        methods: {
            handleClick(item, index) {
                this.activeIndex = index
                this.$router.push(item.url)
                this.showMenu = !this.showMenu
            },
        }
    }
</script>

<style lang="less">
    .menuitem {
        transition: all .3s;

        &:hover {
            color: #409EFF;
            transition: all .3s;
        }
    }

    .headerMenu {
        height: 250px;
        width: 100%;
        position: absolute;
        background: #eaeaea;
        left: 0;
        top: 5%;
        border-top: 2px solid #409EFF;
        z-index: 999;
        padding: 20px;
    }

    .mt20 {
        padding: 4px;
        margin-top: 0;
        transition: all .3s;
        width: 80%;

        &:hover {
            background: white;
            border-radius: 2px;
            transition: all .3s;
        }
    }
</style>